<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>积分商品</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/integral.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <script type="text/javascript">
        function closeWin(){
            api.closeWin({
            });

            var n = api.pageParam.index;
            if (n == null) {
                n = 0;
            }
            page = n;
        };
    </script>
</head>
<body>
    <header class="aui-bar aui-bar-nav pos">
        <a class="aui-pull-left aui-btn" onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">积分商品</div>
    </header>
    <div class="header-d"></div>
    <style>
        body, html{height:100%;}
    </style>
    <!-- 积分商品 -->
    <div id="list">
        <div class="integral-detil">
            <img src="./image/news.jpg" alt="">
            <dl>
                <dt></dt>
                <dd>所属类别：</dd>
                <dd>所需积分：<span>200</span>分/份</dd>
                <dd>兑换人数：0人</dd>
                <dd>剩余数量：0份</dd>
                <dd>兑换数量：<input type="text">份</dd>
            </dl>
            <p>立即兑换</p>
        </div>
        <div class="integral-detil-content">
            <div class="integral-detil-content-t">商品详情</div>
        </div>
    </div>
    <!-- 弹出框 -->
    <div id="pop_list">
        <div class="integral-detil-add-bg" id="pop_box" style="display:none">
            <div class="integral-detil-add">
                <div class="integral-detil-add-t">订单详情</div>
                <div class="integral-detil-add-tab-t">
                    <ul>
                        <li>选择地址</li>
                        <li>新增地址</li>
                    </ul>
                </div>
                <div class="integral-detil-add-tab-d">
                    <div class="integral-detil-add-tab-d-list integral-detil-add-tab-d-list-1">
                        <ul>
                            <li>
                                <label>
                                    <input class="aui-radio" type="radio" name="demo1" checked> 
                                    <span>***</span>
                                    <span>***</span>
                                    <span>***</span>
                                </label>
                            </li>
                        </ul>
                    </div>
                    <div class="integral-detil-add-tab-d-list integral-detil-add-tab-d-list-2">
                        <ul>
                            <li><p>姓名：</p><input type="text"></li>
                            <li><p>电话：</p><input type="text"></li>
                            <li>
                                <p>省市区：</p>
                                <select name="" id="">
                                    <option value=""></option>
                                </select>
                                <select name="" id="">
                                    <option value=""></option>
                                </select>
                                <select name="" id="">
                                    <option value=""></option>
                                </select>
                            </li>
                            <li><p>详细地址：</p><input type="text"></li>
                        </ul>
                    </div>
                </div>
                <div class="integral-detil-add-btn">
                    <a>确认</a>
                    <a class="integral-detil-add-btn-2">取消</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/template" id="template">
   <div class="integral-detil">
       <img src="{{=it.goods_detail.img}}" alt="">
       <dl>
           <dt>{{=it.goods_detail.name}}</dt>
           <dd>所属类别：生活用品</dd>
           <dd>所需积分：<span>{{=it.goods_detail.score}}</span>分/份</dd>
           <dd>兑换人数：{{=it.goods_detail.invented_number}}人</dd>
           <dd>剩余数量：{{=it.goods_detail.max_bought}}份</dd>
           <dd>兑换数量：<input id="change_number" type="text" value="1">份</dd>
       </dl>
       <p onclick="integral_address();">立即兑换</p>
   </div>
   <div class="integral-detil-content">
    <div class="integral-detil-content-t">商品详情</div>
    <div>{{=it.goods_detail.description}}</div>
</div>
</script>
<script type="text/template" id="pop_template">
    <div class="integral-detil-add-bg" id="pop_box">
        <div class="integral-detil-add">
            <div class="integral-detil-add-t">订单详情</div>
            <div class="integral-detil-add-tab-t">
                <ul>
                    <li {{? it.user_address == ''}}style="display:none"{{??}}class="active"{{?}} onclick="chose_address();" id="address_chose">选择地址</li>
                    <li {{? it.user_address == ''}}class="active"{{??}}{{?}} onclick="add_address();" id="address_add">新增地址</li>
                </ul>
            </div>
            <div class="integral-detil-add-tab-d">
                <div class="integral-detil-add-tab-d-list integral-detil-add-tab-d-list-1" id="left_address" {{? it.user_address == ''}}style="display:none"{{??}}style="display:block"{{?}}>
                    <ul>
                        {{~it.user_address:value:index}}
                        <li>
                            <label id="chose_radio">
                                <input value="{{=value.id}}" id="radio_box" value="{{=value.name}}{{=value.phone}}{{=value.address}}" class="aui-radio" type="radio" name="demo1" {{? index == 0}}checked{{??}}{{?}}>
                                <span>{{=value.name}}</span>
                                <span>{{=value.phone}}</span>
                                <span>{{=value.address}}</span>
                            </label>
                        </li>
                        {{~}}
                    </ul>
                </div>
                <div class="integral-detil-add-tab-d-list integral-detil-add-tab-d-list-2" id="right_address" {{? it.user_address==''}}style="display:block"{{??}}style="display:none"{{?}}>
                    <ul>
                        <li><p>姓名：</p><input type="text" id="user_name" value="aaa"></li>
                        <li><p>电话：</p><input type="text" id="user_phone"></li>
                        <li>
                            <!-- <p onclick="district();">省市区：</p> -->
                            <div class="field">
                                <label>省市区：</label>
                                <select id="province" name="province" onchange="province_change();">
                                    <option value="">请选择</option>
                                    {{~it.province:value:index}}
                                    <option value="{{=value.provinceid}}">{{=value.province}}</option>
                                    {{~}}
                                </select>
                                <select id="city" name="city" onchange="city_change();">
                                    <option value="">请选择</option>
                                </select>
                                <select id="area" name="area">
                                    <option value="">请选择</option>
                                </select>
                                <input type="hidden" name="pca" id="pca" />
                            </div>
                        </li>
                        <li><p>详细地址：</p><input type="text" id="user_address"></li>
                    </ul>
                </div>
            </div>
            <div class="integral-detil-add-btn">
                <a onclick="confirm_change();">确认</a>
                <a class="integral-detil-add-btn-2" onclick="hide_pop();">取消</a>
            </div>
        </div>
    </div>
</script>
<script type="text/javascript">

    apiready = function(){

        updateData();
    }

    function updateData() {

        // 进度提示框
        api.showProgress({
            title: '努力加载中...',
            text: '请稍等...',
            modal: false
        });
        
        var id = api.pageParam.goods_id;
        var userid = $api.getStorage('userid');
        if (userid) {
            api.ajax({
                url: webAddress + '/index.php?ctl=goods_information&act=goods_detail',
                method: 'post',
                data: {
                    values: { 
                        id: userid,
                        goods_id:id,
                    },
                }
            },function(ret, err){
                if (ret) {
                    api.hideProgress();
                    // var ret = $api.jsonToStr(ret);
                    // alert(ret);
                    if (ret.status == 0) {
                        alert(ret.info);
                        return false;
                    } else {
                        var data = ret.info;
                        var goods_info = data['goods_detail'];
                        goods_info.img = goods_info.img.substr(1);
                        goods_info.img = webAddress + goods_info.img;
                        templateFun(data);
                    }
                } else {
                    api.hideProgress();
                    alert( JSON.stringify( err ) );
                }
            });
        }
    }

        // 模板赋值函数
        function templateFun(data) {
            var template = $api.byId('template');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(data);
            var user = $api.byId('list');
            $api.html(user, html);
        }

        //打开添加地址的弹窗
        function integral_address(){
            var change_numberEle = $api.byId('change_number');
            change_number = change_numberEle.value;
            number = change_number;
            if (change_number <= 0) {
                api.toast({
                    msg: '请输入正确的数量',
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
            var pop_box_ele = $api.byId('pop_box');
            pop_box_ele.style.display = 'block';

            updateChange(change_number);
        }

        // 收货地址相关
        function updateChange(number){
            // 进度提示框
            api.showProgress({
                title: '努力加载中...',
                text: '请稍等...',
                modal: false
            });

            var id = api.pageParam.goods_id;
            var userid = $api.getStorage('userid');
            if (userid) {
                api.ajax({
                    url: webAddress + '/index.php?ctl=goods_information&act=change_address',
                    method: 'post',
                    data: {
                        values: { 
                            id: userid,
                            goods_id: id,
                            number: number,
                        },
                    }
                },function(ret, err){
                    if (ret) {
                        api.hideProgress();
                        // alert($api.jsonToStr(ret))
                        if (ret.status == 0) {
                            alert(ret.info);
                            return false;
                        } else {
                            var data = ret.info;
                            // province = data.province;
                            pop_templateFun(data);

                        }
                    } else {
                        api.hideProgress();
                        alert( JSON.stringify( err ) );
                    }
                });
            }
        }

        // 模板赋值函数
        function pop_templateFun(data) {
            var template = $api.byId('pop_template');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(data);
            var user = $api.byId('pop_list');
            $api.html(user, html);

            var user_name = $api.getStorage('user_name');
            var user_nameEle = $api.byId('user_name');
            user_nameEle.value = user_name;


            var user_phone = $api.getStorage('mobile');
            var user_phoneEle = $api.byId('user_phone');
            user_phoneEle.value = user_phone;

        }

        // 选择地址
        function chose_address(){
            $('#address_add').removeClass("active");
            $('#address_chose').addClass("active");
            var left_address = $api.byId('left_address');
            var right_address = $api.byId('right_address');
            left_address.style.display = 'block';
            right_address.style.display = 'none';
        }

        // 添加地址
        function add_address(){
            $('#address_chose').removeClass('active');
            $('#address_add').addClass('active');
            var left_address = $api.byId('left_address');
            var right_address = $api.byId('right_address');
            right_address.style.display = 'block';
            left_address.style.display = 'none';
        }

        // 隐藏弹窗
        function hide_pop(){
            var pop_box = $api.byId('pop_box');
            pop_box.style.display = 'none';
        }

        // 确认兑换
        function confirm_change(){

           // 选择地址走的逻辑
           var chose = $('#address_chose').is('.active');
           
           if (chose) { 
            do_change(0);
        }

            // 添加地址走的逻辑
            var add = $('#address_add').is('.active');
            if (add) {
                do_change(1);
            }
        }

        // 访问兑换接口
        function do_change(add_addr){
            // 进度提示框
            api.showProgress({
                title: '努力加载中...',
                text: '请稍等...',
                modal: false
            });

            var address_id = $('#chose_radio input[name="demo1"]:checked ').val();
            // alert(address_id);
            // alert(add_addr);
            // return false;
            var id = api.pageParam.goods_id;
            var userid = $api.getStorage('userid');
            user_name = $('#user_name').val();
            user_phone = $('#user_phone').val();
            province = $("#province").find("option:selected").val();
            city = $("#city").find("option:selected").val();
            area = $("#area").find("option:selected").val();
            var p=$("#province").find("option:selected").text();
            var c=$("#city").find("option:selected").text();
            var a=$("#area").find("option:selected").text();
            $("#pca").val(p+c+a);
            pca = p+c+a;
            user_address = $('#user_address').val();
            // alert(id);
            // alert(userid);
            // alert(user_name);
            // alert(user_phone);
            // alert(province);
            // alert(city);
            // alert(area);
            // alert(p);
            // alert(c);
            // alert(a);
            // alert(pac);
            // alert(user_address);
            // return false;

            if (userid) {
                api.ajax({
                    url: webAddress + '/index.php?ctl=goods_information&act=change_goods',
                    method: 'post',
                    data: {
                        values: { 
                            id: userid,
                            address_id: address_id,
                            add_addr: add_addr,
                            goods_id: id,
                            number: number,
                            user_name: user_name,
                            user_phone: user_phone,
                            province: province,
                            city: city,
                            area: area,
                            pca: pca,
                            user_address: user_address,
                        },
                    }
                },function(ret, err){
                    if (ret) {
                        api.hideProgress();
                        if (ret.status == 0) {
                            alert(ret.info);
                            return false;
                        } else {
                            // var data = ret.info;
                            info = ret.info;
                            api.toast({
                                msg: info,
                                duration: 2000,
                                location: 'bottom'
                            });
                            var pop_box_ele = $api.byId('pop_box');
                            pop_box_ele.style.display = 'none';
                        }
                    } else {
                        api.hideProgress();
                        alert( JSON.stringify( err ) );
                    }
                });
            }

        }

        // 省份改变
        function province_change(){
            $("#area").html('<option value="">请选择</option>');
            var options=$("#province option:selected"); 
            province_id=options.val();
            province_text = options.text();
            $("#city").load(webAddress+"/index.php?ctl=province&act=index&id="+province_id);
        }

        // 城市改变
        function city_change(){
            var options=$("#city option:selected"); //获取选中的项
            city_id=options.val();
            $("#area").load(webAddress+"/index.php?ctl=province&act=area&id="+city_id);
        }

        // $("#province").on("change",function(){
        // });
        // $("#city").on("change",function(){
        //     var id=$(this).val();
        //     $("#area").load(webAddress+"/index.php?ctl=province&act=area&id="+id);
        // });

        // $('.integral-detil').find('p').click(function(){
        //     $('.integral-detil-add-bg').show();
        // });
        // $('.integral-detil-add-btn-2').click(function(){
        //     $('.integral-detil-add-bg').hide();
        // });
        // $(".integral-detil-add-tab-d-list").eq(0).show();
        // $(".integral-detil-add-tab-t li").eq(0).addClass("active");
        // $(".integral-detil-add-tab-t li").mouseover(function(){
        //     $(".integral-detil-add-tab-t li").removeClass("active");
        //     $(this).addClass("active");
        //     $(".integral-detil-add-tab-d-list").hide();
        //     $(".integral-detil-add-tab-d-list").eq($(this).index()).show();
        // })
    </script>
    </html>
